<template>
  <div class="article-templates">
    <article-title :data="data" />
    <n-grid item-responsive>
      <n-gi span="1 800:1 1200:3" />
      <n-gi span="22 800:22 1200:18">
        <div v-removeMouseEffect class="article" :class="sideTheme">
          <slot  name="article"></slot>
        </div>
      </n-gi>
      <n-gi span="1 800:0" />
    </n-grid>
  </div>
</template>

<script setup lang="ts" name="ArticleTemplates">
import ArticleTitle from './components/ArticleTitle.vue';
import { useSettingsStore } from '@/store';
import { toRefs, computed } from 'vue';

const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);

const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {
        title: '',
        createTime: '',
        updateupTime: '',
      };
    },
  },
});
const { data } = toRefs(props);
</script>

<style lang="scss" scoped>
.article {
  box-sizing: border-box;
  padding: 40px 35px;
  background: rgba(255, 255, 255, 0.9);
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
}
:deep(.theme-dark) {
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.7);
  .table-head {
    color: #000;
  }
  .n-space {
    background: rgba(0, 0, 0, 0.972);
  }
}
@media (max-width: 580px) {
  .article {
    padding: 10px 15px;
  }
}

</style>
